<template>
  <div class="example-tb">
    <div class="tb">
      <vol-table
        ref="table"
        :columns="columns"
        :max-height="500"
        :columnIndex="false"
        :ck="true"
        :text-inline="false"
        @row-dbclick="rowDbClick"
        :tableData="tableData"
        :paginationHide="true"
      ></vol-table>
    </div>
    <br />
    <VolBox
      :lazy="true"
      v-model="model"
      :title="title"
      :detailParams="detailParams"
      :fistfileName="fistfileName"
      :height="350"
      :width="width"
      :pdfwidth="pdfwidth"
    >
      <div>当前点击的行数据<br />{{ currentRow }}</div>
    </VolBox>
    <VolReonly
      :lazy="true"
      v-model="fmodel"
      :title="title"
      :detailParams="detailParams"
      :fistfileName="fistfileName"
      :height="350"
      :width="width"
      :pdfwidth="pdfwidth"
    >
      <div>当前点击的行数据<br />{{ currentRow }}</div>
    </VolReonly>
  </div>
</template>
<script>
/*********************此示例采用的vue2语法，也可以使用vue3语法***************************/
import VolTable from "@/components/basic/VolTable.vue";
import VolHeader from "@/components/basic/VolHeader.vue";
import VolBox from "@/views/applydetail.vue";
import VolReonly from "@/views/applyReonly.vue";
export default {
  components: {
    VolTable,
    VolBox,
    VolHeader,
    VolReonly
  },
  setup() {},
  data() {
    var parms = {
      sq_sj: this.sqsj,
      sh_sj: this.spsj,
      shzt: this.shzt,
      pageindex: this.paesize,
      pagesize: this.pagesize,
    };
    console.log('***********查询条件***********',parms)
    this.http
      .post("/api/zm_data_record_auditing/GetData", parms)
      .then((result) => {
        this.tableData = result.rows;
      });
    return {
      currentRow: "",
      model: false,
      fmodel: false,
      width: "90%",
      pdfwidth: "50%",
      title: "测试",
      detailParams: "",
      fistfileName: "",
      url: "/api/app_news/upload", //使用后台自带的上传文件方法，也可以自定义方法上传
      text: "",
      tableData: [],
      columns: [
        //表配置
        {
          field: "data_id", //数据库表字段,必须和数据库一样，并且大小写一样
          type: "string", //数据类型
          isKey: true, //是否为主键字段
          width: 80, //表格宽度
          hidden: true, //是否显示
          readonly: true,
          require: true,
          align: "left", //文字显示位置left、center
        },

        {
          field: "projectname",
          title: "项目名称",
          type: "string",
          width: 240,
          require: true,
          align: "left",
          cellStyle: (row, rowIndex, columnIndex) => {
            return { color: "#409EFF", cursor: "pointer" };
          },
          click: (row, column) => {
            this.title = row.projectname;
            this.http
              .post("/api/zm_data_record/AdminGetDetaileByID?id=" + row.data_id)
              .then((result) => {
                this.detailParams = result.Data;
                if (result.Data.thisdata != undefined) {
                  this.fistfileName = result.Data.thisdata.ssfa_name;
                }
              });
              this.fmodel=true;
          },
        },
        {
          field: "sqcs",
          title: "申请次数",
          type: "string",
          width: 80,
          align: "center",
        },
        {
          field: "shzt",
          title: "审核状态",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "jycs",
          title: "交验次数",
          type: "string",
          width: 100,
          align: "center",
        },
        {
          field: "xxtj_time",
          title: "线下提交时间",
          type: "datetime",
          width: 90,
          align: "center",
        },
        {
          field: "create_time",
          title: "申请时间",
          width: 100,
          type: "datetime",
          align: "center",
        },
        {
          field: "sh_name",
          title: "审核人",
          type: "string",
          width: 90,
          align: "center",
        },
        {
          field: "sh_time",
          title: "审核时间",
          type: "datetime",
          width: 90,
          align: "center",
        },
        {
          title: "操作",
          type: "string",
          width: 90,
          align: "center",
          render: (h, { row, column, index }) => {
            //console.log("row", row);
            if (row.shzt == null || row.shzt =="未审核") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-icon-edit el-tag el-tag--light"],
                      style: { cursor: "pointer", "margin-right": "8px" },
                      onClick: (e) => {
                        this.title = row.projectname;
                        this.http
                          .post("/api/zm_data_record/AdminGetDetaileByID?id=" + row.data_id)
                          .then((result) => {
                            this.detailParams = result.Data;
                            if (result.Data.thisdata != undefined) {
                              this.fistfileName = result.Data.thisdata.ssfa_name;
                            }
                          });
                          this.fmodel=false;
                          this.model = true;
                      },
                    },
                    "开始审批"
                  ),
                ]),
              ]);
            }else
            {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-icon-edit el-tag el-tag--light"],
                      style: { "margin-right": "8px",background:'#f0f0f0' },
                    },
                    "已审批"
                  ),
                ]),
              ]);
            }
          },
        },
      ],
    };
  },
  methods: {
    rowDbClick({ row, column, event }) {},

    clear() {
      this.tableData.splice(0);
    },
    addRow() {
      //添加行时设置默认值
      this.tableData.push({ Enable: 1, UserName: "这里是默认值" });
    },
  },
};
</script>
<style lang="less" scoped>
.example-tb {
  padding: 15px;
}
.tb {
  margin-top: 15px;
}
.v-header {
  background: white;
  padding: 10px;
}
</style>
